<template>
  <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" :width="dialogInfo.width" align-center>
    <div class="app_card pt-4  pb-5">
      <el-table v-loading="loading" element-loading-text="查询中..." stripe size="large" :data="dataOfTable" height="calc(100vh - 400px)">
        <el-table-column label="任务ID" prop="taskName" align="center">
          <template #default="scope">{{ scope.row.taskId }}</template>
        </el-table-column>
        <el-table-column label="任务指令" prop="value" align="center">
          <template #default="scope">{{
            scope.row.value == 0 ? "全关" : "全开"
          }}</template>
        </el-table-column>

        <el-table-column label="任务时间" prop="floor" align="center" show-overflow-tooltip>
          <template #default="scope">

            {{ resetForm('YYYY-mm-dd HH:MM:SS',scope.row.createdTime)}}

          </template>
        </el-table-column>

      </el-table>
      <Pagination ref="paginationRef" @handleChange="handleChange" />

    </div>
  </el-dialog>
</template>
  
<script setup>

import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import Pagination from '@/components/pagination/index.vue';
import { resetForm } from '@/utils/EsDate.js';

// ======================================================
//                      变量声明
// ======================================================

// emit
const emit = defineEmits(['success']);
const loading = ref(false);
const paginationRef = ref(null);

// 弹窗信息
const dialogInfo = ref({
  visible: false,
  title: '',
  width: '800px',
})

// 表格数据
const dataOfTable = ref([]);
// 表格查询参数
const queryParam = ref({
  sort: "Id",
  order: "asc",
  limit: 10,
  page: 1,
  query: "",
})

// ======================================================
//                      点击操作
// ======================================================

// 处理分页尺寸
const handleChange = (data = null) => {
  queryParam.value.page = data?.page;
  queryParam.value.limit = data?.limit;
  loadData();
}
// 点击取消按钮
const onCancel = () => {
  dialogInfo.value.visible = false;
}

// ======================================================
//                      处理事件
// ======================================================


// 加载数据
const show = (id, title, item = null, width = '800px') => {
  console.log(id, title, item, width)
  dialogInfo.value.title = title;
  dialogInfo.value.width = width;
  dialogInfo.value.visible = true;
  if (id) {
    queryParam.value.query = "taskId=" + id;
    loadData()
  }
}

const loadData = (id) => {
  let _queryParam = queryParam.value
  _queryParam.offset = (_queryParam.page - 1) * _queryParam.limit || 0;
  loading.value = true
  EsAjax.post(ApiUrls.tasklogList, _queryParam).then(res => {
    console.error('res===', res)
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data + res.data.msg);
      return;
    }
    let { list, totalCount } = res.data.data
    dataOfTable.value = list;
    paginationRef.value?.changeTotal({ totalCount: totalCount })
  }).catch(err => {
    ElMessage.error(err.message);
  }).finally(() => {
    loading.value = false
  })
}



defineExpose({
  show
})
</script>